<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Flutter InAppBrowser demo</title>
    <link rel="stylesheet" href="https://getbootstrap.com/docs/4.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/demo.css">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

<body >
<div class="main">
    <div class="content">
        <!-- <input /> -->
        <button style="background-color: aqua;" onclick="dianji()">给APP发消息</button>
    </div>

    <button style="background-color: aqua;margin-top: 20px">更改body背景颜色</button>

    <span style="margin-top:20px">接收到APP的消息:
            <span id="text"></span>
        </span>
</div>

<script type="text/javascript">
        window.addEventListener("flutterInAppBrowserPlatformReady", function(event) {
            console.log("ready");

            flutter_inappwebview._callHandler('handlerFoo').then(function(result) {
                console.log(result, typeof result);
                console.log(JSON.stringify(result), result.bar);
            });

            flutter_inappwebview._callHandler('handlerFooWithArgs', 1, true, ['bar', 5], {foo: 'baz'}).then(function(result) {
                console.log(result, typeof result);
                console.log(JSON.stringify(result));
            });

            flutter_inappwebview._callHandler('ping', 'Ready!');
        });

        function dianji(){
        console.log('back from js');
        flutter_inappwebview._callHandler('ping', 'okj');
            flutter_inappwebview._callHandler('test','hello','1234').then(function(result) {
                console.log(result, typeof result);
                console.log(JSON.stringify(result), result);

            });
        }

        window.appSendJs = function(args){

            console.log(args)
            document.getElementById('text').innerHTML  = args
        }


      var port;
      window.addEventListener('message', function(event) {
          if (event.data == 'capturePort') {
              // capture port2 coming from the Dart side
              if (event.ports[0] != null) {
                  // the port is ready for communication,
                  // so you can use port.postMessage(message); wherever you want
                  port = event.ports[0];
                  // To listen to messages coming from the Dart side, set the onmessage event listener
                  port.onmessage = function (event) {
                      // event.data contains the message data coming from the Dart side
                      console.log(event.data);
                  };
              }
          }
      }, false);

      function toast(){
      port.postMessage('js发送给dart');
      }

    </script>
</body>
</html>